import React, { Component } from "react";
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import Logo from "./images/logo192.png";
import "./index.less";
export default class Login extends Component {
    render() {
        return (<div className="login-container">
            <div className="login-header">
                <div className="login-content">
                    <img className="login-logo" src={Logo} alt="login" />
                    <div className="login-title">vvmily系统</div>
                </div>
            </div>
            <div className="login-bodyer">
                <div className="login-form">
                    <h2>欢迎登录vvmily！</h2>
                    <Form
                        name="normal_login"
                        initialValues={{ remember: true }}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: 'Please input your Username!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>

                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>)
    }
}